#t-trade {

  .orderbook-wrapper {
    position: relative;
    #orderbook_loader {
      color: @midgray;
      text-align: center;
      position: absolute;
      top: 200px;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
 }

  .orderbook-hide {
    font-size: 85%;
  }

  @bg: @white;

  .btn-group {
    margin-bottom: -1px;

    .btn {
      width: 120px;
    }
    .btn:first-child {
      .border-radius(0, 0, 0, 4px);
    }
    .btn:last-child {
      .border-radius(4px, 0, 0, 0);
    }
  }

  #add_button, #cancel_button {
    float: right;
  }

  ul.inline {
    margin: 0;
    padding: 0;

    .label {
      color: @darkgray;
      text-align: left;
    }
    .value {
      font-weight: bold;
    }

    li {
      display: inline-block;
      font-size: 12px;

      .icon {
        margin: 0 0 0 3px;
      }
      .up {
        color: @darkgreen;
      }
      .down {
        color: @midred;
      }
      @media (max-width: @screen-xs-max) {
        padding-left: 0;
      }
       @media (max-width: @screen-sm-max) {
        padding-left: 0;
      }
    }

    &.issuers {
      .label {
        width: 120px;
      }
      .value {
        margin-right: 15px;
        @media (max-width: @screen-xs-max) {
          margin-right: 0;
          padding-right: 15px;
        }
      }
    }
  }

  .issuerSelector, .message-select-issuer {
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    border-top: none;
    border-bottom: none;
    background: @bg;
  }

  .settings {
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    border-bottom: none;
    background-color: darken(@bg, 2%);
    .issuers-wrapper {
      display: inline-block;
    }
    button {
      &.btn-block {
        outline: none;
      }
    }
  }

  .message-select-issuer {
    line-height: 25px;
    font-size: 16px;
    font-family: 'OpenSansRegular';
    text-align: center;

    border-bottom: 1px solid darken(@bg, 10%);
  }

  .ticker {
    margin: 0 0 30px;
    padding: 5px 15px;
    border: 1px solid darken(@bg, 10%);
    border-top: none;
    background-color: darken(@bg, 5%);
    list-style-type: none;
    @media (max-width: @screen-xs-max) {
      font-size: 11px;
    }
    .value {
      font-weight: bold;
    }
  }

  .send-widgets {
    form {
      .input-group {
        border-spacing: 0;
      }
    }
  }

  .slash {
    padding-top: 25px;
    font-size: 24px;
  }

  .order-type {
    p.literal {
      margin: 0;
      line-height: 48px;
    }
  }

  .trade-widget {
    // min-height: 430px;
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    background: darken(@bg, 2%);
    word-break: break-word;

    @media (max-width: @screen-sm-max) {
      margin-bottom: 18px;
    }

    .head {
      margin: -15px -15px 15px -15px;
      padding: 10px 15px;
      background-color: darken(@bg, 5%);
      font: 18px 'OpenSansRegular';

      .available {
        font-size: 11px;
        color: @darkgray;
        padding-left: 10px;
        .amount {
          font-weight: bold;
          &:after {
            content: " ";
          }
        }
      }
    }

    .input-group {
      margin: 0 0 20px;
    }
    .errorGroup {
      position: relative;
    }
    .order-values {
      .value-field {
        .input-group {
          width: 100%;
          .input-group-addon {
            width: 33.3333333%;
            @media (max-width: @screen-xs-max) {
              width: 25%;
            }
          }
        }
      }
    }
  }

  .mode-form {
    .order-values {
      .sign {
        text-align: center;
        margin: 40px 0 0 0;
      }
      .error {
        margin-bottom: 0;
        height: 0;
        overflow: visible;
      }

      .input-group-addon {
        color: @white;
        background-color: @midgray;
        padding: 0 10px;
        min-width: 70px;

        .issuer {
          font-size: 10px;
        }
      }
    }
    .message {
      color: @midgreen;
      height: 40px;
      line-height: 20px;
    }
    .btns-row {
      .btns-wrapper {
        float: none;
        margin: 7px auto;
      }
    }
  }

  .mode-confirm {
    text-align: left;
    font-family: OpenSansLight;
    .alert {
      margin-bottom: 0;
    }
    .title {
      margin: 30px 0;
    }
    label {
      font-size: 18px;
      margin-bottom: 0
    }
    sub {
      bottom: 0;
      font-size: 14px;
      font-family: OpenSansRegular;
    }
    .amount_feedback {
      font-size: 18px;
      margin: 10px 0 0 0;
      .ammount-currency {
        font-size: 22px;
      }
    }

    .dest_feedback {
      font-size: 30px;
      margin: 0 0 10px 0;
      .each-price {
        font-size: 22px;
      }
    }

    .rate_feedback {
      margin: 0 0 20px 0;
      font-size: 18px;

      .pair {
        margin-left: 5px;
        font-size: 14px;
      }
      .max-value {
        .rate {
          font-size: 22px;
        }
      }
    }
    .confirm-text {
      font-size: 14px;
      margin-bottom: 5px;
    }
  }

  .widget-myorders-table();

  .toggle {
    margin-left: 10px;
    color: @midblue;
    cursor: pointer;
  }

  .toggle:hover {
    text-decoration: underline;
  }
  .orderlists {
    .transition-duration(0.5s);
  }
  .listings {
    padding: 0 15px;
    border: 1px solid darken(@bg, 10%);
    background: @bg;

    transition: 0.2s;
    max-height: 0;

    .my {
      .head {
        font-weight: bold;
      }
      .row:first-child {
        border-top: none;
      }
      .row {
        border-top: 1px solid @lightgray;

        &:nth-child(even) {
          background-color: darken(@bg, 2%);
        }

        & > div {
          padding: 8px;
          border-right: 1px solid @lightgray;
        }

        & > div:last-child {
          border-right: none;
        }

        .issuer {
          color: lighten(@black,70%);
          font-size: 11px;
        }

        @media (max-width: @screen-xs-max) {
          border: none;
          padding: 4px;

          & > div {
            padding: 4px;
            border: none;
          }

          div:before {
            display: inline-block;
            width: 100px;
            font-weight: bold;
            text-transform: uppercase;
            content: " "attr(data-label);
          }
        }

        .align-right {
          text-align: right;
        }

        .btn-link {
          padding-left: 0px;
          padding-right: 0px;
        }

        .btn-link[disabled] {
          text-decoration: none;
          color: #999999;
        }

        .form-control {
          font-size: 14px;
          height: 36px;
          padding: 5px 10px;
        }

        .form-control.changed {
          background-color: #fcf8e3;
        }

        .input-group {
          margin-bottom: 10px;
        }

        .input-group .input-group-addon.inline-inputs-group {
          text-align: center;
          font-size: 10px;
          line-height: 1;
          padding: 10px;
          @media(max-width: @screen-xs-max) {
            &:before {
              display: block;
            }
          }
        }

        .action {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    .emptyMessage {
      margin: 10px 0;
    }

    .alert {
      line-height: 1.428571429;
      padding: 8px;
      float: left;
    }
  }

  .alert {
    line-height: 1;
  }

  .alert-danger .dismiss {
    margin:0 5px;
    color:darken(@midred, 10%);
  }

  .alert-danger .dismiss:hover {
    color:darken(@midred, 30%);
  }

  .listings.offers {
    max-height: 1000px;
    overflow: auto;
  }
  .orderlists {
    opacity: 1;
    &.loading {
      opacity: 0;
    }
  }
  .listings.orders {
    max-height: 9999px;
    overflow: auto;
    min-height: 720px;
  }

  .orderbookupdate {
    padding-top: 15px;
    line-height: 68px;
    .orderbook-title {
      font-family: OpenSansSemibold, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      text-transform: uppercase;
      small {
        text-transform: none;
      }
    }
    .last-update {
      text-align: right;
    }
    @media (max-width: @screen-xs-max) {
      line-height: 34px;
      padding-bottom: 0;
      .last-update {
        text-align: left;
      }
      h3 {
        margin-bottom: 0;
        margin-top: 5px;
      }
    }
  }

  .orderbook {
    @media (max-width: @screen-xs-max) {
      font-size: 10px;
    }
    .title {
      margin: 0 -15px 15px -15px;
      font: bold 15px 'OpenSansRegular';
      text-transform: uppercase;
      background: darken(@bg, 5%);
      padding: 10px;
      text-align: center;
    }
    .head {
      font: 15px 'OpenSansRegular';
      margin-bottom: 10px;

      .currency {
        color: @darkgray;
      }
    }

    .my {
      font-weight: bold;
      color: @darkgreen;

      .insig {
        color: @darkgreen;
        font-weight: normal;
      }

      .delete {
        margin: 0 10px 0 0;

        text-decoration: none;
      }
    }

    .new {
      font-weight: normal;
      color: @black;
      .animation-mixin(newfadeout 5s ease-out 0s);
    }

    .changed {
      font-weight: normal;
      color: @black;
      .animation-mixin(changefadeout 5s ease-out 0s);
    }

    .keyframes-mixin(newfadeout, {
        color: @midgreen;
        font-weight: bold;
      }, {
        color: @black;
        font-weight: normal;
    });
    .keyframes-mixin(changefadeout, {
        color: @midred;
        font-weight: bold;
      }, {
        color: @black;
        font-weight: normal;
    });

    @media (min-width: @screen-md-max) {
      .bids {
        border-right: 1px solid darken(@bg, 20%);
      }
      .asks {
        border-left: 1px solid darken(@bg, 20%);
      }
    }

    @media (max-width: @screen-md-max) {
      .asks {
        border-top: 6px solid @midgray;
        padding-top: 10px;
      }
    }

    .bids, .asks {
      .row {
        padding: 4px 0;
        text-align: right;

        .rpamount {
          font-size: 14px;
          padding-left: 5px;
          padding-right: 5px;
        }

        .sum, .size, .price {
          padding-left: 5px;
          padding-right: 5px;
        }

        &:nth-child(odd) {
          background-color: darken(@bg, 5%);
        }
      }

      background-color: darken(@bg, 2%);
    }

    a {
      color: inherit;
    }

    .message {
      text-align: center;
      padding-bottom: 20px;
    }

    .issuer {
      font-size: 10px;
      color: @darkgray;
    }
  }

  .cancelling {
    color: lighten(@black,70%);

    a {
      color: lighten(@black,70%);
    }

    .cancelling.changed {
      background-color: #fcf8e3;
    }

    .action a {
      display: none;
    }
  }

  .btn-cancel-order {
    color: @midred;
  }

}

.t-trade header nav ul > .active#nav-advanced > a:after {
  border-bottom-color: @lightgray;
}

.table {
  display: table;
  @media (max-width: @screen-sm-max) {
    display: block;
  }

  margin: 0;
  border-collapse: separate;
  border-spacing: 15px 0px;
  table-layout: fixed;
  .grid {
    @media (min-width: @screen-sm-max) {
      margin-left: -30px;
      margin-right: -30px;
    }
  }
  .table-row {
    display: table-row;
    @media (max-width: @screen-sm-max) {
      display: block;
    }
    .col-cell {
      display: table-cell;
      @media (max-width: @screen-sm-max) {
        display: block;
      }
      vertical-align: top;
      float: none;
    }
  }
}

.animation-mixin(@arguments) {
  -moz-animation: @arguments;
  -webkit-animation: @arguments;
  -o-animation: @arguments;
  animation: @arguments;
}

.keyframes-mixin(@name, @fromRules, @toRules) {
    @-moz-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
    @-o-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
    @-webkit-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
            @keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
}
